<template>
  <div class="user-info">
    <div class="section">
      <div class="section-hd">基本信息</div>
      <div class="section-bd">
        <div class="item">
          <div>用户ID：</div>
          <div class="value">{{ psInfo.uid }}</div>
        </div>
        <div class="item">
          <div>真实姓名：</div>
          <div class="value">{{ psInfo.real_name || '-' }}</div>
        </div>
		<div class="item">
		  <div>昵称：</div>
		  <div class="value">{{ psInfo.nickname || '-' }}</div>
		</div>
        <div class="item">
          <div>手机号码：</div>
          <div class="value">{{ psInfo.phone || '-' }}</div>
        </div>
		<div class="item">
		  <div>登录账号：</div>
		  <div class="value">{{ psInfo.account_two || '-' }}</div>
		</div>
       <!-- <div class="item">
          <div>生日：</div>
          <div class="value">{{ psInfo.birthday | timeFormat('birthday') }}</div>
        </div> -->
        <!-- <div class="item">
          <div>性别：</div>
          <div v-if="psInfo.sex" class="value">{{ psInfo.sex == 1 ? '男' : '女' }}</div>
          <div v-else class="value">保密</div>
        </div> -->
        <!-- <div class="item">
          <div>身份证号：</div>
          <div class="value">{{ psInfo.card_id || '-' }}</div>
        </div> -->
        <div class="item" v-if="psInfo.customer_type == 4">
          <div>代理商地址：</div>
          <div class="value">{{psInfo.agent_province}}-{{psInfo.agent_city}}-{{psInfo.agent_district}}-{{psInfo.detailed_address}}</div>
        </div>
		
		<div class="item" v-if="psInfo.customer_type == 1">
		  <div>学生地址：</div>
		  <div class="value">{{psInfo.agent_province}}-{{psInfo.agent_city}}-{{psInfo.agent_district}}-{{psInfo.detailed_address}}</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 2 || psInfo.customer_type == 4">
		  <div>后台登录账号：</div>
		  <div class="value">{{psInfo.admin_account}}</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 4">
		  <div>代理商类型：</div>
		  <div class="value">{{psInfo.agent_type_name}}</div>
		</div>
		
      </div>
    </div>
    <!-- <div class="section">
      <div class="section-hd">密码</div>
      <div class="section-bd">
        <div class="item">
          <div>登录密码：</div>
          <div class="value">********</div>
        </div>
      </div>
    </div> -->
    <div class="section">
      <div class="section-hd">用户概况</div>
      <div class="section-bd">
		  
		  
        <div class="item">
          <div>用户类型：</div>
          <div class="value">{{ psInfo.customer_type_name }}</div>
        </div>
		<div class="item" v-if="psInfo.customer_type == 1">
		  <div>所属代理：</div>
		  <div class="value">{{ psInfo.belong_agent_name }}</div>
		</div>
        <div class="item">
          <div>用户状态：</div>
          <div class="value">{{ psInfo.status ? '开启' : '禁用' }}</div>
        </div>
		
		<div class="item" v-if="psInfo.customer_type == 1">
		  <div>学员年级：</div>
		  <div class="value" v-if="psInfo.class == 1">初一</div>
		  <div class="value" v-if="psInfo.class == 2">初二</div>
		  <div class="value" v-if="psInfo.class == 3">初三</div>
		  <div class="value" v-if="psInfo.class == 4">高一</div>
		  <div class="value" v-if="psInfo.class == 5">高二</div>
		  <div class="value" v-if="psInfo.class == 6">高三</div>
		  <div class="value" v-if="psInfo.class == 7">初四</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 1">
		  <div>是否认证：</div>
		  <div class="value">{{ psInfo.is_face_auth == 1 ? '未认证' : '已认证' }}</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 1 && (psInfo.class == 1 || psInfo.class == 2 || psInfo.class == 3 || psInfo.class == 7)">
		  <div>年级规划：</div>
		  <div class="value" v-if="psInfo.grade_plan == 0">无</div>
		  <div class="value" v-if="psInfo.grade_plan == 1">五四制</div>
		  <div class="value" v-if="psInfo.grade_plan == 2">六三制</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 1">
		  <div>是否复读：</div>
		  <div class="value" v-if="psInfo.is_repeat == 1">是</div>
		  <div class="value" v-if="psInfo.is_repeat == 2">否</div>
		</div>
		
		<!-- <div class="item" v-if="psInfo.customer_type == 1">
		  <div>学员身份：</div>
		  <div class="value">{{ psInfo.user_identity == 1 ? '普通学员' : '付费学员' }}</div>
		</div> -->
        <!-- <div class="item">
          <div>用户等级：</div>
          <div class="value">{{ psInfo.vip_name || '-' }}</div>
        </div>
        <div class="item">
          <div>用户标签：</div>
          <div class="value">{{ psInfo.label_list || '-' }}</div>
        </div> -->
        <!-- <div class="item">
          <div>用户分组：</div>
          <div class="value">{{ psInfo.group_name || '-' }}</div>
        </div> -->
        <!-- <div class="item">
          <div>推广人：</div>
          <div class="value">{{ psInfo.spread_uid_nickname || '-' }}</div>
        </div> -->
        <div class="item">
          <div>注册时间：</div>
          <div class="value">{{ psInfo.add_time | timeFormat }}</div>
        </div>
		
		<div class="item" v-if="psInfo.customer_type == 4">
		  <div>全科卡密数量：</div>
		  <div class="value">{{ psInfo.carmine_zhu_count }}</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 4">
		  <div>副科卡密数量：</div>
		  <div class="value">{{ psInfo.carmine_fu_count }}</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 4">
		  <div>听力次数：</div>
		  <div class="value">{{ psInfo.hearing_count }}</div>
		</div>
		
		<div class="item" v-if="psInfo.customer_type == 4">
		  <div>阅读理解次数：</div>
		  <div class="value">{{ psInfo.reading_count }}</div>
		</div>
		
        <!-- <div class="item">
          <div>登录时间：</div>
          <div class="value">{{ psInfo.last_time | timeFormat }}</div>
        </div> -->
        <div v-if="psInfo.is_money_level" class="item">
          <div>付费会员：</div>
          <div class="value">
            {{
              psInfo.is_ever_level == 1 ? '永久会员' : psInfo.overdue_time ? `${psInfo.overdue_time} 到期` : '已过期'
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="section-hd">用户备注</div>
      <div class="section-bd">
        <div class="item">
          <div>备注：</div>
          <div class="value">{{ psInfo.mark || '-' }}</div>
        </div>
      </div>
    </div>
	
	<div class="section" v-if="psInfo.customer_type == 1">
	  <div class="section-hd">用户课程记录</div>
	  <div class="section-bd">
			
			<el-table
			    :data="psInfo.student_open_log"
			    style="width: 100%;margin-top: 20px;"
			    max-height="300">
			    <el-table-column
			      fixed
			      prop="id"
			      label="ID"
			      width="80">
			    </el-table-column>
			    <el-table-column
			      prop="course_name"
			      label="开通的课程"
			      width="170">
			    </el-table-column>
			    <el-table-column
			      prop="type_text"
			      label="科目类型"
			      width="150">
			    </el-table-column>
			
				<el-table-column
				  prop="create_time"
				  label="状态"
				  width="120"
				  v-if="roles == '777'"
				  >
				  <template slot-scope="scope">
				    <el-switch
				      class="defineSwitch"
				      :active-value="1"
				      :inactive-value="2"
				      v-model="scope.row.status"
				      :value="scope.row.status"
				      @change="changeSwitch(scope.row)"
				      size="large"
				      active-text="正常"
				      inactive-text="禁用"
				    >
				    </el-switch>
				  </template>
				</el-table-column>
				
				<el-table-column
				  prop="create_time"
				  label="状态"
				  width="120"
				  v-else
				  >
				  <template slot-scope="scope">
				    
					<div v-if="scope.row.status == 1">正常</div>
					<div v-if="scope.row.status == 2">失效</div>
				  </template>
				</el-table-column>
				
				
			    <el-table-column
			      prop="create_time"
			      label="开通时间"
			      width="150">
			    </el-table-column>
			    <el-table-column
			      prop="carmine_text"
			      label="所属卡密"
			      width="200">
			    </el-table-column>
			   <el-table-column
			      fixed="right"
			      label="操作"
			      width="120"
				  v-if="roles == '777' || roles == '10'"
				  >
			      <template slot-scope="scope" style="background-color: red;">
					
					<el-button
					  @click.native.prevent="editRow(scope.row,scope.$index)"
					  type="text"
					  size="small">
					  更换课程
					</el-button>  
					  
					  
			        <el-button
			          @click.native.prevent="deleteRow(scope.row,scope.$index)"
			          type="text"
			          size="small">
			          删除
			        </el-button>
			      </template>
			    </el-table-column>
				
				<el-table-column
				   fixed="right"
				   label="操作"
				   width="120"
				 v-else
				  >
				   <template slot-scope="scope" style="background-color: red;">
							
				   </template>
				 </el-table-column>
			  </el-table>
			
	  </div>
	</div>
	
	
	<el-dialog
	  title="提示"
	  :visible.sync="dialogVisible"
	  width="30%"
	  :before-close="handleClose">
	  <div>
		  
		 <!-- <el-radio-group v-model="check_cate_id" size="medium">
			<el-radio-button v-for="item in cate_list" :label="item.cate_name" ></el-radio-button>
			
		  </el-radio-group> -->
		  
		  <el-radio v-model="check_cate_id" :label="item.id" v-for="item in cate_list">{{item.cate_name}}</el-radio>
	
	  </div>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="subcourse">确 定</el-button>
	  </span>
	</el-dialog>
	
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { editStudentOpenCourse ,deleteStudentOpenCourse,judgeadminroles} from '@/api/user';
import { allcoursecatelist,setstudentcourse} from '@/api/product';
export default {
  name: 'userInfo',
  props: {
    psInfo: Object,
  },
  filters: {
    timeFormat(value, birthday) {
      let i = birthday ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss';
      if (!value) {
        return '-';
      }
      return dayjs(value * 1000).format(i);
    },
    gender(value) {
      if (value == 1) {
        return '男';
      } else if (value == 2) {
        return '女';
      } else {
        return '未知';
      }
    },
  },
  computed: {
	
	
	  
    hasExtendInfo() {
      //   return this.psInfo.extend_info.some((item) => item.value);
    },
  },
  
  data() {
    return {
  		dialogVisible:false,
		
		check_cate_id:0,  //当前选择的课程id
		
		cate_list:[],
		
		now_info:{},
		now_index:'',
		
		roles:0,  //当前管理员身份
    };
  },
  created() {
   
  	this.judgeadminroles();
  },
  methods: {
	  
	  judgeadminroles(){
		  judgeadminroles({
		    	
		  })
		  .then((res) => {
				this.roles = res.data.roles
		  	
		  })
		  .catch((res) => {
		    that.$message.error(res.msg);
		  });
	  },
	  
	  //更换课程提交
	  subcourse(){
		  console.log(this.now_info);
		  console.log(this.check_cate_id);
		  
		  var that = this
		  setstudentcourse({
		    id:that.now_info.id,
			cate_id:that.check_cate_id
		  })
		  .then((res) => {
				that.dialogVisible = false;
				
				
				
				for(var i=0;i<that.psInfo.student_open_log.length;i++){
					if(that.now_index == i){
						that.psInfo.student_open_log[i].course_name = res.data.cate_name
					}
				}
				
		  	  that.$message({
		  	  	type: 'success',
		  	  	message: '更换成功'
		  	  });
		  })
		  .catch((res) => {
		    that.$message.error(res.msg);
		  });
	  },
	  //更换课程
	  editRow(row,index){
		this.now_info = row
		this.now_index = index
		  this.dialogVisible = true;
		  var that = this
		allcoursecatelist({
		  	
		})
		.then((res) => {
			that.cate_list = res.data.list
			
		})
		.catch((res) => {
		  that.$message.error(res.msg);
		});
	  },
	  
	  deleteRow(row,index){
		  
		  var that = this
		  this.$confirm('此操作将永久删除, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		  }).then(() => {
			  
			
			
			deleteStudentOpenCourse({
				id:row.id
			})
			  .then((res) => {
							
				that.$message({
					type: 'success',
					message: '删除成功'
				});
				
				that.psInfo.student_open_log.splice(index, 1);
			
			  })
			  .catch((res) => {
			    that.$message.error(res.msg);
			  });
			
			
			
		  }).catch(() => {
			      
		  });
		  
		  
		  
		   
		
	  },
	  
	  changeSwitch(row){	
		var that = this
		editStudentOpenCourse({
			id:row.id,
			status:row.status
		})
		  .then((res) => {
			this.$message({
				type: 'success',
				message: '更新成功!'
			});
		
		  })
		  .catch((res) => {
		    this.$message.error(res.msg);
		  });
		
	  },  
  }
};
</script>

<style lang="scss" scoped>
.width-add {
  width: 40px;
}
.mr30 {
  margin-right: 30px;
}

.user-info {
  .section {
    padding: 25px 0;
    border-bottom: 1px dashed #eeeeee;

    &-hd {
      padding-left: 10px;
      border-left: 3px solid var(--prev-color-primary);
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      color: #303133;
    }

    &-bd {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      flex: 0 0 calc((100% - 60px) / 3);
      display: flex;
      margin: 16px 30px 0 0;
      font-size: 13px;
      color: #666;

      &:nth-child(3n + 3) {
        margin: 16px 0 0;
      }
    }

    .value {
      flex: 1;
    }
    .avatar {
      width: 60px;
      height: 60px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
